<template>
  <div class="com-container" @dblclick="gotoChinaMap">
    <div class="com-chart" id="map"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getProvinceMapInfo } from '../utils/map_utils'
export default {
  data () {
    return {
      chartId: null,
      allData: null,
      timer: null
    }
  },
  methods: {
    gotoChinaMap () {
      this.chartId.setOption({
        geo: {
          map: 'china'
        }
      })
    },
    async initChart () {
      this.chartId = this.$echarts.init(
        document.getElementById('map'),
        this.theme
      )
      // 获取地图数据
      const { data: mapData } = await this.$http.get('china')
      this.$echarts.registerMap('china', mapData)
      const initOption = {
        // 图例的位置和排列方式
        legend: { left: '5%', bottom: '5%', orient: 'vertical' },
        geo: {
          type: 'map',
          map: 'china',
          top: '5%',
          bottom: '5%',
          //   itemStyle: { areaColor: '#2E72BF', borderColor: '#333' },
          itemStyle: {
            normal: {
              borderWidth: 0.5, // 区域边框宽度
              borderColor: '#FFFFFF', // 区域边框颜色
              areaColor: '#2E72BF' // 区域颜色
            },
            emphasis: {
              borderWidth: 3,
              borderColor: '#4b0082',
              areaColor: '#fff'
            }
          },
          label: {
            show: true,
            textStyle: {
              fontSize: 16,
              color: '#fff'
            }
          }
        },
        title: { text: '▎ 商家分布', left: 20, top: 20 }
      }
      this.chartId.setOption(initOption)
      this.chartId.on('click', async (params) => {
        // 根据策略模式  拿到 点击省份的 拼音  然后进行请求 获取省份的json数据
        const key = getProvinceMapInfo(params.name).key
        if (key === undefined) return
        // 拿到字段后发起axios 请求
        const { data: res } = await this.$http.get(key + '')
        // 重新渲染设置地图
        this.$echarts.registerMap(key, res)
        // 设置opeions 为当前点击的省份
        this.chartId.setOption({
          geo: {
            map: key
          }
        })
        this.getData()
      })
    },
    async getData () {
      const { data: res } = await this.$http.get('map')
      this.allData = res
      this.updateChart()
    },
    updateChart () {
      const legendArr = this.allData.map((item) => {
        return item.name
      })
      // 获取散点数据
      const seriesArr = this.allData.map((item) => {
        return {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          name: item.name,
          data: item.children,
          rippleEffect: { scale: 5, brushType: 'stroke' },
          itemStyle: {

          }
        }
      })
      const updateOption = {
        legend: {
          data: legendArr
        },
        series: seriesArr
      }
      this.chartId.setOption(updateOption)
    },
    screenAdapter () {
      const titleFontSize =
        (document.getElementById('map').offsetWidth / 100) * 3.6
      const AdapteOption = {
        title: { textStyle: { fontSize: titleFontSize * 0.7 } },
        legend: {
          itemWidth: titleFontSize / 2,
          itemHeight: titleFontSize / 2,
          itemGap: titleFontSize / 2,
          textStyle: { fontSize: titleFontSize / 2 }
        }
      }
      this.chartId.setOption(AdapteOption)
      this.chartId.resize()
    }
  },
  computed: {
    ...mapState(['theme'])
  },
  mounted () {
    this.initChart()
    this.getData()
    this.screenAdapter()
    window.addEventListener('resize', this.screenAdapter)
  },
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
  },
  watch: {
    // 监听主题的变化  主题变化后更新图表
    theme () {
      this.chartId.dispose() // 重新渲染组件
      this.initChart()
      this.screenAdapter()
      this.updateChart()
    }
  }
}
</script>

<style>
</style>
